<!-- 视图点位 -->

<template>
  <div :class="pointClass" :style="pointStyle" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <div class="Secure-MapView-point-icon" :style="iconStyle" @click.stop="toShow">
      <CommonSvg class="flexCC" :style="`background: ${iconColor}`" :src="CORE.imageIOT(obj)" @click="toShow" />
    </div>

    <div class="Secure-MapView-point-panel">
      <div>{{ obj.deviceName }}</div>
      <div>{{ obj.areaName }}</div>
      <div v-if="obj.ipAddress">{{ obj.ipAddress }}</div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewPoint',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('map', 'map_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父组件视图
     */
    parentView() {
      return CORE.componentParent(this, 'MapView') || {}
    },

    /**
     * 点位样式类
     */
    pointClass() {
      const { obj, hide, map_MAP, $parent: { readyImg }, parentView: { scaleH } } = this
      const name = 'Secure-MapView-point'
      const isHover = map_MAP.hoverId === obj.deviceId || map_MAP.hoverType === obj.pointTypeCode
      const hoverStr = isHover ? ` ${name}-hover` : ''
      const hideStr = hide || !readyImg ? ` ${name}-hide` : ''
      const topStr = obj.top * scaleH < 4000 ? ` ${name}-nearTop` : ''
      const bottomStr = (100 - obj.top) * scaleH < 10000 ? ` ${name}-nearBottom` : ''
      return `${name}${hideStr}${hoverStr}${topStr}${bottomStr} noMove`
    },

    /**
     * 点位样式对象
     */
    pointStyle() {
      const { obj, parentView: { scale = 1, rotate = 0 } } = this
      const left = obj.left === null ? null : `${obj.left}%`
      const top = obj.top === null ? null : `${obj.top}%`
      const display = left && top ? null : 'none'
      const transform = `scale(${1 / scale}) rotate(${-rotate}deg)`
      return { display, left, top, transform }
    },

    /**
     * 图标颜色
     */
    iconColor() {
      const { obj, map_GETTER } = this
      const STATUS = map_GETTER.STATUS.map(([id, ...other]) => [`${id}`, ...other])
      return CORE.dict(STATUS, obj.objectRunStatus, 2) || STATUS[0][2]
    },

    /**
     * 图标样式
     */
    iconStyle() {
      const type = this.pointClass.includes('nearTop') ? 'bottom' : 'top'
      return `border-${type}-color: ${this.iconColor}`
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开详情
     */
    toShow() {
      this.map_openShow(this.obj)
      this.$emit('click', this.obj)
    },

    /**
     * 点击修改
     */
    toEdit(e) {
      this.map_setOne(this.obj)
      this.$emit('edit', e)
    },

    /**
     * 点击删除
     */
    toDel() {
      this.map_setOne(this.obj)
      this.map_startDel()
    },

    /**
     * 鼠标进入
     */
    mouseEnter() {
      this.map_MAP.hoverId = this.obj.deviceId
    },

    /**
     * 鼠标离开
     */
    mouseLeave() {
      this.map_MAP.hoverId = ''
    },
  },
}
</script>
